<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getOrderPage } from '@/api/product/order'
//时间选择
const time = ref('')
//订单号
const orderId = ref('')
//当前页码
let pageNo = ref<number>(1)
//每页条数
let limit = ref<number>(10)
// 存储一下已有品牌数据的总数
let total = ref<number>(0)
//存储数据
let dishArr = ref<any>([])
// 获取已有品牌的接口封装为一个函数
const getDish = async () => {
  let result = await getOrderPage(pageNo.value, limit.value)
  console.log(result)
  if (result.code == 1) {
    //存储总个数
    total.value = result.data.total
    dishArr.value = result.data.records
  }
}
//分页器页码发生变化时候触发
const changePageNo = () => {
  //当前页码发生变化的时候，再次发请求，获取数据
  getDish()
}
//当下拉菜单发生变化的时候，会触发此方法
const sizeChange = () => {
  pageNo.value = 1
  getDish()
}
//发送请求，组件一挂载
onMounted(() => {
  getDish()
})
</script>

<template>
  <div class="-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <div style="display: inline-block;">
        <!-- 输入框 订单号 -->
        <el-input
          size="large"
          style="width: 200px; margin: 0px 20px"
          v-model="orderId"
          placeholder="请输入订单号"
          clearable
        ></el-input>

        <!-- 顶部的时间栏按钮 -->
        <el-date-picker
          size="large"
          v-model="time"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-button type="primary" size="default" style="margin: 0px 20px">搜索</el-button>
      </div>

      <!-- 表格组件用户展示已经有的菜品 -->
      <el-table :data="dishArr" style="margin: 20px 0px">
        <el-table-column label="订单号" prop="id"></el-table-column>
        <el-table-column label="订单状态" width="100px">
          <template #="{ row, $index }">
            <text>{{ row.status == 2 ? '正在派送' : '派送完成' }}</text>
          </template>
        </el-table-column>
        <el-table-column
          label="用户"
          prop="consignee"
          width="100px"
        ></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="下单时间" width="200px">
          <template #="{ row, $index }">
            <text style="color: rgb(108, 200, 239)">{{ row.orderTime }}</text>
          </template>
        </el-table-column>
        <el-table-column label="实收金额" width="100px">
          <template #="{ row, $index }">
            <text>￥{{ row.amount }}</text>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button type="primary" size="small" circle>查看</el-button>
            <el-button type="primary" size="small" circle>修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器组件
       v-model:current-page :设置当前的分页器页码
       v-model:page-size : 展示条数每一页
       :page-sizes :设置下拉框的选择条数
       layout ：分页器的六个子组件的位置调整
      -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="changePageNo"
      />
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
